<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		div{box-sizing: border-box; text-align: center;font-weight: bold;}
		
		.div1{border:3px solid red;overflow: hidden;}
		.div11,.div12{float:left}
		.div11{width:30%;border:2px solid green;height:400px;}
		.div12{width:70%;border:2px solid teal;}
		.div121{float:left;height:100px;width:33.33%;border:1px solid #000;}
		
		@media screen and (max-width:760px) {
			.div11{width:0;height:0;}
			.div12{width:100%;}
			.div121{width:50%;}
		}
		
		@media screen and (min-width:761px) and (max-width:980px){
			.div121{width:50%;}
		}
	</style>
	<body>
		<div class="div1">
			<div class="div11"></div>
			<div class="div12">
				<div class="div121">1</div>
				<div class="div121">2</div>
				<div class="div121">3</div>
				<div class="div121">4</div>
				<div class="div121">5</div>
				<div class="div121">6</div>
				<div class="div121">7</div>
				<div class="div121">8</div>
				<div class="div121">9</div>
			</div>
		</div>
	</body>
</html>
